import React from 'react';
import './index.css';

export default class App extends React.Component {
  state = {
    // 用户名输入框
    username: '',
    // 评论内容
    content: '',
    // 列表数据
    list: [
      {
        id: 1,
        username: '杜甫',
        content: '读书破万卷，下笔如有神。',
      },
      {
        id: 2,
        username: '王阳明',
        content: '志不立，天下无可成之事。',
      },
      {
        id: 3,
        username: '苏轼',
        content: '古之立大事者，不惟有超世之才，亦必有坚忍不拔之志。',
      },
    ],
  };
  // 新增方法-发布评论
  // 定义方法并且绑定
  // 方法里面阻止表单默认提交事件
  // 把数据添加到list列表中
  handleSubmit = (e) => {
    console.log('e----->', e);
    // 阻止表单默认提交事件
    e.preventDefault();
    // 判断内容是否为空提示
    if (!this.state.username.trim() || !this.state.content.trim()) {
      alert('评论人和内容不能为空');
      return;
    }

    // 采用一个新值去覆盖旧值，通过拓展运算符拼接
    const newList = [
      // Date.now()是一个时间戳
      {
        id: Date.now(),
        username: this.state.username,
        content: this.state.content,
      },
      ...this.state.list,
    ];
    // 把新增数据添加到list
    this.setState({
      list: newList,
      // 新增后赋值为空字符串
      username: '',
      content: '',
    });
  };
  handleClear = () => {};
  // 删除列表方法
  handleDel = (id) => {
    // this.state.list.splice() 错误写法
    // filter过滤方法来实现
    // 通过filter过滤出不等于id的列表数据
    const newList = this.state.list.filter((item) => item.id !== id);
    console.log('newList----->', newList);
    this.setState({
      list: newList,
    });
  };

  // 受控组件方法
  // handleChange = (e) => {
  //   console.log('e.target----->', e.target);
  //   this.setState({
  //     username: e.target.value,
  //   });
  // };
  // handleChange2 = (e) => {
  //   console.log('e.target----->', e.target);
  //   this.setState({
  //     content: e.target.value,
  //   });
  // };

  // 受控组件方法-优化
  handleChange = (e) => {
    console.log('e.target----->', e.target);
    this.setState({
      [e.target.name]: e.target.value,
    });
  };

  render() {
    return (
      <div>
        <div className="app">
          {/* 表单提交的时候，运行发布评论的函数 */}
          <form>
            <input
              value={this.state.username}
              className="user"
              type="text"
              name="username"
              placeholder="请输入评论人"
              onChange={this.handleChange}
            />
            <br />
            <textarea
              value={this.state.content}
              name="content"
              className="content"
              cols="30"
              rows="10"
              placeholder="请输入评论内容"
              onChange={this.handleChange}
            />
            <br />
            <button onClick={this.handleSubmit}>发表评论</button>
            <button onClick={this.handleClear} type="button">
              清空评论
            </button>
          </form>
          <ul>
            {this.state.list.map((item) => {
              return (
                <li>
                  <h3>评论人: {item.username}</h3>
                  <p>评论内容：{item.content}</p>
                  {/* 绑定事件，并且传递ID参数 */}
                  <button onClick={() => this.handleDel(item.id)}>删除</button>
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    );
  }
}
